<script setup lang="ts">
import HeaderMenu from '@/components/HeaderMenu.vue'
import HeaderTop from '@/components/HeaderTop.vue'
import HeaderNews from '@/components/HeaderNews.vue'
</script>

<template>
  <div class="common-layout">
    <el-container class="container-layout">
      <el-header class="header">
        <header-top />
        <div class="header-nav">
          <!-- 左边导航菜单 -->
          <header-menu />
          <!-- 右边告警信息 -->
          <header-news />
        </div>
      </el-header>
      <nav class="nav-con">
        <router-view></router-view>
      </nav>
    </el-container>
  </div>
</template>

<style scoped lang="stylus">
.common-layout, .container-layout{
  width: 1920px;
  height: 1080px;
  .header {
    width: 100%;
    height: 90px;
    padding: 0;
  }
  .header-nav {
    height: 40px;
    width: 100%;
    background: linear-gradient(90deg, rgba(34, 91, 134, 1), rgba(1, 65, 85, 1));
    // background: var(--header-background);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
  .nav-con {
    width: 100%;
    height: calc(100% - 90px);
  }
}
</style>